<template>
  <div>
    <el-dialog :title="title" :visible.sync="visible" width="1000px" append-to-body custom-class="import-dialog"
               @close="close"
    >
      <div class="form-box">
        <el-tabs v-model="activeName">
          <el-tab-pane label="基本信息" name="base">
            <el-descriptions title="订单信息" :column="2">
              <el-descriptions-item label="订单编号">{{
                  form.orderId
                }}
              </el-descriptions-item>
              <el-descriptions-item label="状态">
                <dict-tag :options="dict.type.order_state"
                          :value="form.orderState"
                />
              </el-descriptions-item>
              <el-descriptions-item label="成交方式">
                <dict-tag :options="dict.type.trading_mode" :value="form.tradingMode"/>
              </el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="租住信息" :column="2">
              <el-descriptions-item label="房源">{{
                  form.premisesAddress
                }}
              </el-descriptions-item>
              <el-descriptions-item label="租住周期">{{ form.checkInTime | formatDate('YYYY-MM-DD') }}至{{
                  form.checkOutTime | formatDate('YYYY-MM-DD')
                }}
              </el-descriptions-item>

              <el-descriptions-item label="押付方式" v-if="form.orderLessee && form.rentalMode == 1">
                {{ formatLabel(form.depositNumber, 'options') }}
                {{ formatLabel(form.payNumber, 'payoptions') }}
              </el-descriptions-item>
              <el-descriptions-item label="月租金" v-if="form.orderLessee && form.rentalMode == 1">
                {{ form.monthRent }}
              </el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="基本信息" :column="2">
              <el-descriptions-item label="已付租金">
                {{ form.rentPaidNumber }}
              </el-descriptions-item>
              <el-descriptions-item label="已付押金">
                {{ form.depositPaidNumber }}
              </el-descriptions-item>
              <el-descriptions-item label="预定人">
                {{ form.reserveUser }}
              </el-descriptions-item>
              <el-descriptions-item label="联系方式">
                {{ form.reserveUserPhone }}
              </el-descriptions-item>
              <el-descriptions-item label="创建人">
                {{ form.createBy }}
              </el-descriptions-item>
              <el-descriptions-item label="创建时间">
                {{ form.createTime }}
              </el-descriptions-item>
              <el-descriptions-item label="来源">
                <dict-tag :options="dict.type.order_source" :value="form.orderSource"/>
              </el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="承租信息" v-if="form.orderLessee && form.orderLessee.lesseeType == 1" :column="2">
              <el-descriptions-item label="姓名">
                {{ form.orderLessee.lesseeName }}
              </el-descriptions-item>
              <el-descriptions-item label="手机号">
                {{ form.orderLessee.phone }}
              </el-descriptions-item>
              <el-descriptions-item label="身份证号">
                {{ form.orderLessee.cardNumber }}
              </el-descriptions-item>
              <el-descriptions-item label="性别">
                {{ form.orderLessee.lesseeSex == 1 ? '男' : '女' }}
              </el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="承租信息" v-if="form.orderLessee && form.orderLessee.lesseeType == 2" :column="2">
              <el-descriptions-item label="企业名称">
                {{ form.orderLessee.enterpriseName }}
              </el-descriptions-item>
              <el-descriptions-item label="统一社会信用代码">
                {{ form.orderLessee.uscc }}
              </el-descriptions-item>
              <el-descriptions-item label="企业联系人">
                {{ form.orderLessee.lesseeName }}
              </el-descriptions-item>
              <el-descriptions-item label="联系人手机号">
                {{ form.orderLessee.phone }}
              </el-descriptions-item>
<!--              <el-descriptions-item label="联系人身份证号">-->
<!--                {{ form.orderLessee.cardNumber }}-->
<!--              </el-descriptions-item>-->
            </el-descriptions>
            <el-descriptions title="申请信息" :column="2">
              <el-descriptions-item label="操作人">
                {{ form.createBy }}
              </el-descriptions-item>
              <el-descriptions-item label="申请时间">
                {{ form.createTime }}
              </el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="其他信息" :column="2">
              <el-descriptions-item label="订单备注">
                <el-button size="small" @click="editRemark">编辑</el-button>
                {{ form.remark }}
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="入住人信息" name="guest" v-if="['7','8','9','10','11','12','13','14'].includes(form.orderState)">
            <el-table :data="memberList" style="width: 100%">
              <el-table-column prop="memberType" label="分类">
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.member_type" :value="scope.row.memberType"/>
                </template>
              </el-table-column>
              <el-table-column prop="memberName" label="姓名">
              </el-table-column>
              <el-table-column prop="memberPhone" label="手机号">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button type="text" size="mini" @click="handleMemberInfo(scope.row)">查看详情</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-dialog title="入住人详情" :visible.sync="dialogMemberVisible" width="700px" append-to-body>
              <el-descriptions title="入住人信息" :column="2">
                <el-descriptions-item label="分类">
                  <dict-tag :options="dict.type.member_type" :value="memberInfo.memberType"/>
                </el-descriptions-item>
                <el-descriptions-item label="姓名">{{
                    memberInfo.memberName
                  }}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{
                    memberInfo.memberPhone
                  }}</el-descriptions-item>
                <el-descriptions-item label="身份证号">{{
                    memberInfo.idCard
                  }}</el-descriptions-item>
                <el-descriptions-item label="关系" v-if="memberInfo.memberType == 3">
                  <dict-tag :options="dict.type.member_relation" :value="memberInfo.memberRelation"/>
                </el-descriptions-item>
                <el-descriptions-item label="证件照片" v-if="memberInfo.memberType != 2 && memberInfo.facePhoto">
                  <el-image style="width: 100px; height: 100px" :src="memberInfo.facePhoto" fit="contain" :preview-src-list="[memberInfo.facePhoto]"></el-image>
                </el-descriptions-item>
              </el-descriptions>
            </el-dialog>
          </el-tab-pane>
          <el-tab-pane label="退租信息" v-if="Inspectionfo" name="surrender">
            <el-descriptions title="用户信息" :column="2">
              <!-- <el-descriptions-item label="操作人">{{
                Inspectionfo.createBy
              }}</el-descriptions-item> -->
              <!-- <el-descriptions-item label="退房原因">{{
                Inspectionfo.remark
              }}</el-descriptions-item> -->
              <el-descriptions-item label="退租日期">{{
                  Inspectionfo.refundRentTime | formatDate('YYYY-MM-DD')
                }}
              </el-descriptions-item>
              <el-descriptions-item label="申请日期">{{
                  Inspectionfo.applicationTime | formatDate('YYYY-MM-DD')
                }}
              </el-descriptions-item>
              <el-descriptions-item label="房屋状态">
                {{ houseStateText(Inspectionfo.houseState) }}
              </el-descriptions-item>
              <el-descriptions-item label="房屋图片">
                <!-- <div style="display: flex">
                  <img :src="item" style="width: 60px; height: 60px" alt=""
                    v-for="(item, index) in Inspectionfo.houseImgsList" :key="index" />
                </div> -->
                <div style="display: flex;flex-wrap: wrap">
                  <el-image fit="contain" style=";width: auto; height: 50px;padding: 5px;" :src="item"
                            :preview-src-list="Inspectionfo.houseImgsList"
                            v-for="(item, index) in Inspectionfo.houseImgsList" :key="index"
                  >
                  </el-image>
                </div>

              </el-descriptions-item>
              <el-descriptions-item label="验房人员">{{
                  Inspectionfo.createBy
                }}
              </el-descriptions-item>
              <el-descriptions-item label="验房时间">{{
                  Inspectionfo.createTime
                }}
              </el-descriptions-item>
            </el-descriptions>

            <el-table :data="Inspectionfo.facilityDetailList" style="width: 100%" v-if="Inspectionfo.houseState == 2">
              <el-table-column prop="name" label="损坏设施"></el-table-column>
              <el-table-column prop="price" label="赔偿金额"></el-table-column>
            </el-table>
          </el-tab-pane>

          <el-tab-pane label="操作记录" name="handle">
            <el-table :data="orderRecordList" style="width: 100%">
              <el-table-column prop="orderBeforeState" label="前置订单状态">
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.order_state" :value="scope.row.orderBeforeState"/>
                </template>
              </el-table-column>
              <el-table-column prop="orderAfterState" label="变更后的状态">
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.order_state" :value="scope.row.orderAfterState"/>
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="时间">
              </el-table-column>
              <el-table-column prop="recordReason" label="备注">
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
    <el-dialog title="编辑备注" :visible.sync="dialogVisible" width="400px">
      <el-form ref="form" :model="remarkForm" label-width="80px">
        <el-form-item label="备注内容" prop="remark">
          <el-input type="textarea" v-model="remarkForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getOrderInfo,
  orderRecordList,
  orderRemark,
  getInspectionfoByOrderId
} from '@/api/order/order'
import { getNextDate } from '@/utils/common/time.js'
import { memberList } from '@/api/order/member'

export default {
  name: 'orderInfo',
  dicts: ['order_state', 'trading_mode','member_type','member_relation','order_source'],
  components: {},
  props: {
    title: {
      default: '订单详情'
    },
    value: {
      default: false
    },
    orderId: {
      default: undefined
    },
    isDetail: {
      default: false
    },
    success: {
      type: Function,
      default: () => {
      }
    }
  },
  data() {
    var validateCheck = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请选择审核结果'))
      } else {
        if (value == 1) {
          callback(new Error('请选择审核结果'))
        }
        callback()
      }
    }
    return {
      remarkForm: {
        remark: ''
      },
      dialogVisible: false,
      activeName: 'base',
      // visible: false,
      dialogSelectHouseVisible: false,
      form: {},
      areaCalculateState: false,
      chargeItemList: [],
      chargeItemSelected: [],
      options: [
        {
          value: 1,
          label: '押一'
        },
        {
          value: 2,
          label: '押二'
        },
        {
          value: 3,
          label: '押三'
        },
        {
          value: 4,
          label: '押四'
        },
        {
          value: 5,
          label: '押五'
        },
        {
          value: 6,
          label: '押六'
        },
        {
          value: 7,
          label: '押七'
        },
        {
          value: 8,
          label: '押八'
        },
        {
          value: 9,
          label: '押九'
        },
        {
          value: 10,
          label: '押十'
        },
        {
          value: 11,
          label: '押十一'
        },
        {
          value: 12,
          label: '押十二'
        }
      ],
      payoptions: [
        {
          value: 1,
          label: '付一'
        },
        {
          value: 2,
          label: '付二'
        },
        {
          value: 3,
          label: '付三'
        },
        {
          value: 4,
          label: '付四'
        },
        {
          value: 5,
          label: '付五'
        },
        {
          value: 6,
          label: '付六'
        },
        {
          value: 7,
          label: '付七'
        },
        {
          value: 8,
          label: '付八'
        },
        {
          value: 9,
          label: '付九'
        },
        {
          value: 10,
          label: '付十'
        },
        {
          value: 11,
          label: '付十一'
        },
        {
          value: 12,
          label: '付十二'
        }
      ],
      orderRecordList: [],
      Inspectionfo: null,
      // 入住人列表
      memberList: [],
      // 入住人详情
      memberInfo: {},
      // 入住人详情弹窗
      dialogMemberVisible: false,
    }
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(val){
        this.$emit('update:value', val)
      }
    },
    houseStateText() {
      return (value) => {
        let obj = [{ label: '正常', value: '1' }, { label: '损坏', value: '2' }].find(item => item.value == value)
        console.log('obj', obj)
        return obj ? obj.label : ''
      }

    }
  },
  watch: {},
  mounted() {
    this.getInfo()
    this.getList()
  },
  methods: {
    getNextDate: getNextDate,
    editRemark() {
      this.remarkForm.remark = JSON.parse(JSON.stringify(this.form.remark))
      this.dialogVisible = true
    },
    submit() {
      let form = {
        orderId: this.form.orderId,
        remark: this.remarkForm.remark
      }
      orderRemark(form).then((response) => {
        this.$message.success('编辑成功')
        this.dialogVisible = false
        this.getInfo()
      })
    },
    //日期更改
    periodChange(e) {
      this.form.checkInTime = e[0] + ' 00:00:00'
      this.form.checkOutTime = e[1] + ' 23:59:00'
    },
    finallySignChange(e) {
      this.form.finallySignTime = e + ' 23:59:00'
    },
    //重置表单
    reset() {
      this.form = this.$options.data().form
    },
    formatLabel(value, arr) {
      let data = this[arr].find((item) => {
        return item.value == value
      })
      return data ? data.label : ''
    },
    //获取详情
    getInfo() {
      if (!this.orderId) return
      getOrderInfo(this.orderId).then((response) => {
        this.form = response.data
        if (['10', '11'].includes(this.form.orderState)) {
          getInspectionfoByOrderId(this.orderId).then((res) => {
            let Inspectionfo = res.data
            this.Inspectionfo = Inspectionfo
          })
        }
        // 获取入住人列表
        this.getmemberList()
      })
    },

    //获取操作记录
    getList() {
      if (!this.orderId) return
      orderRecordList({ orderId: this.orderId }).then((response) => {
        this.orderRecordList = response.rows
      })
    },
    //成员列表
    getmemberList() {
      memberList({
        houseId: this.form.houseId,
        orderId: this.form.orderId
      }).then((response) => {
        this.memberList = response.rows
      })
    },
    //操作入住人信息详情
    handleMemberInfo(row) {
      this.memberInfo = {...row}
      this.dialogMemberVisible = true
    },
    //关闭
    close() {
      this.$emit('input', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.import-dialog {
  height: auto;
  max-height: 80vh;
  overflow-y: auto;

  .dialog-footer {
    text-align: center;
  }
}

::v-deep .el-dialog__body {
  max-height: 80vh !important;
  overflow-y: auto;
}

.form-box {
  .tabs {
    display: flex;

    .tabs-item {
      padding: 0 10px;
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      position: relative;
      cursor: pointer;

      &::before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -2px;
        width: 0;
        height: 2px;
        opacity: 0;
        background: #0caaf0;
        transition: all 0.3s;
      }

      &.active {
        color: #0caaf0;

        &::before {
          opacity: 1;
          left: 0;
          width: 100%;
        }

        cursor: default;
      }
    }
  }

  .add-form {
    .section {
      .label {
        display: flex;
        margin-bottom: 20px;
        font-size: 16px;
        align-items: center;
        color: #303133;

        label {
          display: block;
          width: 80px;

          &.dot::before {
            content: "*";
            color: #ff4949;
            margin-right: 4px;
          }
        }

        .icon {
          color: #02a7f0;
          font-size: 30px;
          margin-left: 30px;
          cursor: pointer;
        }
      }

      .tips {
        color: #aaaaaa;
      }

      .custom-formItem-lable {
        display: flex;
        align-items: center;

        .handle-icon {
          color: #02a7f0;
          font-size: 30px;
          margin-left: 30px;
          cursor: pointer;
        }
      }

      .handle-icon {
        color: #02a7f0;
        font-size: 30px;
        cursor: pointer;
      }
    }
  }
}
</style>
